<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>canvas grid</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            :focus{
                text-decoration: underline;
            }
            input:hover{
                background-color: #aaa;
            }
            input:focus{
                border:1px red solid;
            }
        </style>
    </head>
    <body>
        <div>
            <canvas id='hua' height="300" width="300" style="border: 0px black solid">
                Your browser isn't support html5!
            </canvas>
            <script type="text/javascript">
                var paint = document.getElementById("hua");
                var hua = paint.getContext("2d");

                function shu(colorS) {
                    for (var i = 0; i <= 300; i = i + 30) {
                        hua.beginPath();
                        hua.moveTo(i, 0);
                        hua.lineTo(i, 300);
                        hua.closePath();
                        hua.strokeStyle = colorS;
                        hua.stroke();
                    }
                }
                function heng(colorH) {
                    for (var i = 0; i <= 300; i = i + 30) {
                        hua.beginPath();
                        hua.moveTo(0, i);
                        hua.lineTo(300, i);
                        hua.closePath();
                        hua.strokeStyle = colorH;
                        hua.stroke();
                    }
                }
                function PaintGrid(cH, cS) {
                    heng(cH);
                    shu(cS);
                }
                lg = hua.createLinearGradient(0, 0, 300, 300);
                lg.addColorStop(0.2, "#f00");
                lg.addColorStop(0.5, "#0f0");
                lg.addColorStop(0.8, "#00f");
                hua.fillStyle = lg;
                hua.fillRect(0, 0, 300, 300);
                PaintGrid("white", "white");

            </script>
            <input type="text" placeholder="input something" >
            <p>jkfdj;f</p>
            <h1>jfkld</h1>
            
        </div>
    </body>
</html>
